<!DOCTYPE html>
<!--
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
    <meta charset="utf-8">
    <title>Placeholder Plugin &mdash; CKEditor Sample</title>
    <script src="../../../ckeditor.js"></script>
    <script src="../../../dev/console/console.js"></script>
    <script src="../../../dev/console/focusconsole.js"></script>
    <script src="../../widget/dev/console.js"></script>
    <script src="../../../samples/sample.js"></script>
    <link rel="stylesheet" href="../../../samples/sample.css">
</head>
<body>
<h1 class="samples">Placeholder Plugin</h1>

<h2>Classic (iframe-based) Sample</h2>
<textarea cols="80" id="editor1" name="editor1" rows="10">
		&lt;p&gt;This is a [[sample placeholder]]. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;. &lt;/p&gt;
	</textarea>

<h2>Inline Sample</h2>
<div id="editor2" contenteditable="true" cols="10" rows="10">
    <p>This is a [[sample placeholder]]. You are using <a href="http://ckeditor.com/">CKEditor</a>. </p>
</div>

<h2>Div Editing Area Sample</h2>
<textarea cols="80" id="editor3" name="editor3" rows="10">
		&lt;p&gt;This is a [[sample placeholder]]. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;. &lt;/p&gt;
	</textarea>

<script>

    CKEDITOR.replace('editor1', {
        extraPlugins: 'placeholder',
        height: 100
    });

    CKEDITOR.inline('editor2', {
        extraPlugins: 'placeholder',
        height: 100
    });

    CKEDITOR.replace('editor3', {
        extraPlugins: 'placeholder,divarea',
        height: 100
    });

    CKCONSOLE.create('widget', {editor: 'editor1'});
    CKCONSOLE.create('focus', {editor: 'editor1'});
    CKCONSOLE.create('widget', {editor: 'editor2'});
    CKCONSOLE.create('focus', {editor: 'editor2'});
    CKCONSOLE.create('widget', {editor: 'editor3'});
    CKCONSOLE.create('focus', {editor: 'editor3'});

</script>
</body>
</html>
